<template>
	<div class="main">
		<div class="cover_c">
			<div class="cover">
				<img src="https://xxx.oss.com/dxdh/%E8%92%99%E7%89%88%E7%BB%84%201.png" alt=""
					style="width:100%;height:100%">
			</div>
		</div>
		<div class="content">
			<div class="title">
				<div>修改密码</div>
			</div>
			<!-- <div class="explain">填写相关信息后，点击“开始自主填报”按钮，考生就可以在了解自己“往年当量”的基础上，开始志愿的智能化自主填报了。</div>
		    <div class="explain">新高考的地区批次，科类选择新高考;传统高考的地区批次，科类请选择对应的批次及科目</div>
		    <div class="explain">新高考分物理类和历史类的，科类请选择相对应的科类;批次选择新高考</div> -->
			<div class="form">

				<div class="center">
					<el-form ref="form" :model="form" :rules="formrule" label-width="180px" style="width:500px"
						size="medium" id="selectform">
						<!-- <el-form-item label="参考年份: ">
		                    <el-select v-model="form.region" placeholder="请选择您的高考年份" style="width:100%">
		                    <el-option label="2020" value=2020></el-option>
		                    <el-option label="2019" value=2019></el-option>
		                    </el-select>
		                </el-form-item> -->
						<el-form-item label="新密码: " prop="password" style="margin-top:56px">
							<el-input v-model="form.password" type="password" placeholder="请填写您的新密码" class="input"></el-input>

						</el-form-item>
						<el-form-item label="确认新密码: " prop="subpassword" style="margin-top:35px 	">
							<el-input v-model="form.subpassword" type="password" placeholder="请填写您的确认新密码" class="input"></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="select">
				<el-button class="buttonright" type="primary" @click="change()">提交系统修改</el-button>

			</div>
		</div>
	</div>
</template>

<script>
	import sha from '../common/sha1'
	export default {
		data() {
			const validatePass2 = (rule, value, callback) => {
				if (value !== this.form.password) {
					callback(new Error("两次输入密码不一致!"));
				} else {
					callback();
				}
			};
			return {
				form: {
					'password': '',
					'subpassword': ''
				},
				formrule: {
					'password': [{
						required: true,
						message: "请输入新密码",
						trigger: 'blur'
					}, {
						min: 6,
						max: 16,
						message: "长度在 6 到 16 个字符",
						trigger: "blur",
					}],
					'subpassword': [{
						required: true,
						message: "请输入新密码",
						trigger: 'blur'
					}, {
						validator: validatePass2,
						trigger: "blur"
					}]
				}
			}
		},
		methods: {
			change() {
				let username = JSON.parse(sessionStorage.getItem("username"))
				let password = sha.sha1(this.form.password)
				this.$refs.form.validate(async (valid)=>{
					if(valid){
						let fd = new FormData()
						fd.append('username',username)
						fd.append("password",password)
						const res = await this.$axios.post(`${this.baseURL}/information/updateUserInfoPassWord`,fd)
						if(res.data.data =="修改成功"){
							this.$message.success("密码更改成功")
							this.$router.push('/informationfilling')
						}else{
							this.$message.success("更改失败")
						}
					}
					else{
						return false;
					}
				})
	
			}
		}
	}
</script>

<style scoped>
	.cover {
		position: absolute;
		top: -210px;
		z-index: 0;
		/* width: 100%; */
		height: 276px;
		/* text-align: center; */
		left: 50%;
		margin-left: -960px;
		overflow: hidden;
	}

	.cover_c {
		position: relative;
		width: 100%;
	}

	.main {
		position: relative;
	}

	.form {
		width: 1200px;
		min-height: 150px;
		/* background-color: aqua; */
		align-items: center;
		justify-content: center;
		display: flex;

	}

	.center {
		align-items: center;

	}

	.content {
		width: 1440px;
		min-height: 804px;
		background-color: #fff;
		margin: 100px auto;
		/* position: relative; */
		margin-bottom: 24px;
		position: relative;
		z-index: 1;
	}

	.title {
		width: 100%;
		height: 210px;
		font-size: 40px;
		font-family: Noto Sans SC;
		/* line-height: 71px; */
		color: #000000;
		/* margin: 0 auto; */
		font-weight: 700;
		/* margin-top: 80px; */
		letter-spacing: 2px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.buttonright {
		margin-top: 65px;
		font-size: 23px;
	}

	#selectform>>>.el-form-item__label {
		font-size: 30px;
		font-family: Noto Sans SC;
		color: #333333;
		line-height: 30px;
	}

	#selectform>>>.el-input__inner {
		border: 1px solid rgba(51, 170, 255, 1);
		border-radius: 8px;
		height: 100%;
		font-family: Noto Sans SC;
	}

	#selectform>>>.el-input {
		width: 425px;
		height: 45px;
	}
</style>
